<style>
/*模板列表*/
/*ul,li {
    list-style:none;
}
a {
    text-decoration:none;
}
.borderup {
    background: #fff;
    padding-top: 5px;
}
.default-temp-h {
    height:60px;
    line-height: 60px;
    background:#e1edf1;
    text-indent:80px;
    font: bold 22px/60px "Microsoft YaHei";
    color:#385d7b;
}
.default-temp-name {
    color:#235882;
    font-size: 16px;
    margin: 0;
}
.info {
    margin: 10px 0;
}
.info li {
    line-height:22px;
    font-size:13px;
    color:#638ba5;
}
.info li label {
    width:50px;
    margin-right:8px;
}
.info li a {
    color:#638ba5;
}
a.btn-download {
    -webkit-appearance: none;
    padding: 0;
    width: 130px;
    height: 41px;
    margin: 30px 0 0 0;
    border: none;
    line-height: 41px;
    font-size: 16px;
    font-weight:bold;
    color:#484848;
    vertical-align: top;
    background: url(../images/sprit.png) -70px -154px;
    text-align: center;
}
a.btn-download:hover {
    background: url(../images/sprit.png) -70px -90px;
}
.temp-list-tit {
  width: 48px;
  border-bottom: 2px solid #4f6b81;
    line-height: 46px;
    height: 46px;
    margin: 0 0 -1px 80px;
    color: #4f6b81;
}
.temp-tab-tab td {
  float:right;
  width:160px;
  height:40px;
    margin-right: 8px;
}
.btn-online {
    position: relative;
    top: -17px;
    width: 163px;
    height: 60px;
    background: url(../images/sprit.png) -37px -699px;
    border: 0;
}
.btn-online:hover {
    background: url(../images/sprit.png) -36px -618px;
}
.btn-upload {
    width: 130px;
    height: 43px;
    margin-right: 38px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    background: url(../images/sprit.png) -71px -538px;
    border: 0;
}
.btn-upload:hover {
    background: url(../images/sprit.png) -70px -477px;
}
.temp-tableform {
  border:0;
  background:#fff;
    margin-left: 78px;
}
.template-list .item {
  width:auto;
  height:auto;
  margin:0 40px 20px 0;
  padding:20px 50px;
  background:#e1edf1;
  box-shadow: 0 2px 5px 2px rgba(0,0,0,.2);
}
.template-list .item img{
  width:310px;
  height:235px;
  padding:0;
  border:0;
}
.temp-btns {
    display: inline-block;
    width: 57px;
    height: 20px;
    border: 0;
    vertical-align: text-bottom;
}
.btn-use {
    margin-right: 5px;
    background: url(../images/sprit.png) -1px -234px;
}
.btn-delete {
    margin-left: 5px;
    background: url(../images/sprit.png) 0 -295px;
}
.btn-use:hover {
    background: url(../images/sprit.png) -1px -262px;
}
.btn-delete:hover {
    background: url(../images/sprit.png) 0px -323px;
}*/
/*上传进度条*/
/*
.panel-process {
  display: none;
  height: 90px;
  width: 620px;
  padding: 50px 30px 0;
  border-radius: 15px;
  top:20%;
}
.panel-word {
    font-size: 15px;
}
.panel-underline {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.loadBar {
    display: inline-block;
    width: 565px;
    height: 10px;
    margin: 12px auto;
    border-radius: 20px;
    position: relative;
    background: #D4D9DD;
    box-shadow: inset 0 0 2px 1px #d1d1d1;
}
.loadBar div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.loadBar div span, .loadBar div i {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 20px;
}
.loadBar div i {
    width: 100%;
    animation: move .8s linear infinite;
    -webkit-animation: linear .8s ease infinite;
    background: -webkit-linear-gradient(left top, #D7AF46 0%, #D7AF46 10%, #FCC95A 10%, #FCC95A 50%, #D7AF46 50%, #D7AF46 60%, #FCC95A 60%, #FCC95A 100%);
    background-size: 8px 8px;
}
.loadBar .percentNum {
    position: absolute;
    top: -40px;
    left: 0;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #52A0EB;
    background-color: #52A0EB;
    color: #fff;
}
.panel-process .icon-cross {
    display: inline-block;
    vertical-align: 10px;
    margin-left: 20px;
    width: 15px;
    height: 15px;
    background: url(../images/sprit.png) no-repeat 0 -438px;
}*/
</style>
<{area inject='.mainHead' }>
  <div class="clearfix ColColorGray borderup" style="border-right:0;">
    <{if $currentTheme.name}>
      <h4 class="default-temp-h">
        <{t}>
          正在使用的模板
        <{/t}>
        <{help docid="77" type="link" }>
            <{t}>点击查看帮助<{/t}>
        <{/help}>
      </h4>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          
          <td width="200" valign="top" style="padding:5px 5px 5px 80px; vertical-align:top;">
            <h4 class="default-temp-name">
              <{$currentTheme.name}>
                (
                <{$currentTheme.version}>
                  )
            </h4>
            <ul class="info">
              <li><label>版本号:</label><span><{$currentTheme.name}>(<{$currentTheme.version}>)</span></li>
              <li><label>开发者:</label><a href="<{$currentTheme.site}>" target="_blank"><{$currentTheme.author}></a></li>
              <li><label>网&nbsp;&nbsp;&nbsp;&nbsp;址:</label><a href="#" target="_blank" title="">http://www.shopex.cn</a></li>
            </ul>
            <{$currentTheme.desc}>
              <div class="template-options">
                <!-- <a class="sysiconBtnNoIcon" href="index.php?ctl=system/template&act=edit&p[0]=<{$currentTheme.theme}>">
                  <{t}>
                    编辑模板
                  <{/t}>
                </a> -->
                <a target="download" href="index.php?ctl=system/template&act=dlpkg&p[0]=<{$currentTheme.theme}>" class="sysiconBtnNoIcon btn-download">
                  <{t}>
                    下载模板
                    <{/t}>
                </a>
                <!-- <a class="sysiconBtnNoIcon" href='index.php?ctl=system/tmpimage&act=index&theme=<{$currentTheme.theme}>&istheme=1'>
                  <{t}>
                    模板文件管理
                  <{/t}>
                </a> -->
              </div>
          </td>
          <td valign="top" style="vertical-align:top" width="572" height="352">
            <img id="<{$currentTheme.theme}>_img" style="border: 1px solid #bec6ce;"
            src="index.php?ctl=system/template&act=previewImg&p[0]=<{$currentTheme.theme}>"
            width="570" height="350" />
            <div class="template-color">
              <{if $currentTheme.config.config}>
                <{foreach from=$currentTheme.config.config item=c_info key=key}>
                  <{if $c_info[type]=='fullstyle' }>
                    <span class="template-color-item" <{if $c_info[value]==$selected_css}>
                      style="border:2px solid #336699;"
                      <{/if}>
                        >
                        <span title="<{$c_info[label]}>" onMouseOver="$('<{$currentTheme.theme}>_img').src='index.php?ctl=system/template&act=previewImg&p[0]=<{$currentTheme.theme}>&p[1]=<{$c_info[preview]}>'"
                        onClick="W.page('index.php?ctl=system/template&act=setColor&p[0]=<{$currentTheme.theme}>&p[1]=<{$c_info[value]}>')"
                        style="background-color: <{$c_info[color]}>;">
                        </span>
                    </span>
                    <{/if}>
                      <{/foreach}>
                        <{/if}>
            </div>
          </td>
          <!-- <td>
            <iframe src="<{$install_url}>/adminintro.html" width="500" height="182"
            scrolling="no" frameborder="0">
            </iframe>
          </td> -->
        </tr>
      </table>
      <{else}>
        <div class="error">
          当前应用的模板
          <{$currentTheme.theme}>
            不存在！请重新设置！
        </div>
        <{/if}>
          <table border="0" cellspacing="0" cellpadding="0" style="width:100%">
            <tr>
              <td>
                <h4 class="temp-list-tit">
                  <{t}>
                    已安装
                    <{/t}>
                </h4>
              </td>
              <td>
                <{if $cantUploadMsg=='writeable' }>
                  因为模板目录无法写入，因此无法通过后台直接上传模板包。
                  <{else}>
                    <table class="temp-tab-tab">
                      <tr>
                        <td >
                          <{button class="btn-online" label="" type="button" onclick="
                          new Dialog('{$install_url}#http://{$env.server.HTTP_HOST}{$env.server.PHP_SELF}?ctl={$env.get.ctl}&act=install_online',
                          {frameable:true,title:'在线安装模板',onClose:function(){
                          W.page('index.php?ctl=system/template&act=index');
                          }})" }>
                            <!-- <sup class='font10px fontcolorRed'>
                              NEW
                            </sup> -->
                        </td>
                        <td>
                          <{button class="btn-upload" type="button" label="上传模板" id="fix_fl10upload_panel" style="" icon="" }>
                        </td>
                      </tr>
                    </table>
  </div>
  <{/area}>
    <div id="template">
      <div class="template-list">
        <div class="tableform clearfix temp-tableform">
          <script language="javascript">
            function install_template_click_handle() {

}

            new Swiff.Uploader({
              verbose: true,
              url: 'index.php?ctl=system/template&act=upload&sess_id=' + sess_id,
              path: 'images/uploader.swf',
              typeFilter: {
                'Images (*.tgz, *.tar.gz, *.theme)': '*.tgz;*.tar.gz;*.theme'
              },
              fileSizeMax: 5242880,
              target: 'fix_fl10upload_panel',
              onSelectFail: function(rs) {
                rs.each(function(v) {
                  if (v.validationError == 'sizeLimitMax') {
                    alert(v.name + '\n\n文件超出大小限制');
                  };
                });
              },
              onSelectSuccess: function(rs) {
                rs.each(function(v, i) {
                  new Element('div', {
                    'class': 'item',
                    id: 'uping-' + v.id
                  }).inject($('all-themes'));
                  $('uping-' + v.id).setHTML('<div class="panel-hint panel-process" id="panelProcess"><span class="panel-word">自动解压安装</span><div class="panel-underline"><div id="loadBar" class="loadBar"><div><span class="percent"><i></i></span></div><span class="percentNum">0%</span></div><span class="icon-cross" id="btnClose"></span></div></div>');
                });
                this.start();
              },
              onFileOpen: function(e) {
                $('uping-' + e.id).getElement('center').set('text', '生成中...');
              },
              onFileProgress: function(e) {
                var pt = Number(e.progress.bytesLoaded * 100 / e.size).toFixed() + '%';
                $('uping-' + e.id).getElement('i').setStyle('width', pt);
                $('uping-' + e.id).getElement('center').set('text', pt);

              },
              onFileComplete: function(res) {
                if (res.response.error) {
                  return new MessageBox('文件' + res.name + '上传失败', {
                    type: 'error',
                    autohide: true
                  });
                }
                $('uping-' + res.id).setHTML(res.response.text);

              }
            });
          </script>
          <{/if}>
            </td>
            </tr>
            </table>
            <div id="all-themes">
              <{foreach from=$themes item=theme name=theme}>
                <{if $theme.name}>
                  <div class="item all-item">
                    <table border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td align="center" valign="top">
                          <div class="template-img td-template-img">
                            <img id="<{$theme.theme}>_img" src="index.php?ctl=system/template&act=previewImg&p[0]=<{$theme.theme}>"
                            width="120" height="160" />
                            <div>
                              <div class="template-color">
                                <{if $theme.config}>
                                  <{foreach from=$theme.config.config item=c_info key=key}>
                                    <{if $c_info[type]=='fullstyle' }>
                                      <span class="template-color-item">
                                        <span title="<{$c_info[label]}>" onMouseOver="$('<{$theme.theme}>_img').src='index.php?ctl=system/template&act=previewImg&p[0]=<{$theme.theme}>&p[1]=<{$c_info[preview]}>'"
                                        style="background-color: <{$c_info[color]}>;">
                                        </span>
                                      </span>
                                      <{/if}>
                                        <{/foreach}>
                                          <{/if}>
                              </div>
                              <a href="index.php?ctl=system/template&act=setDefault&p[0]=<{$theme.theme}>" class="sysiconBtnNoIcon temp-btns btn-use">
                                <{t}><{/t}>
                              </a>
                              <{if !$env.const.SAAS_MODE}>
                                <!-- <a href="index.php?ctl=system/template&act=edit&p[0]=<{$theme.theme}>"
                                class="sysiconBtnNoIcon">
                                  <{t}>
                                    编辑
                                    <{/t}>
                                </a>
                                <a href="<{$base_url}>?previewtheme-<{$theme.theme}>-index.html" class="sysiconBtnNoIcon"
                                target="_blank">
                                  <{t}>
                                    预览
                                    <{/t}>
                                </a> -->
                                <{else}>
                                  <a target="download" href="index.php?ctl=system/template&act=dlpkg&p[0]=<{$theme.theme}>" class="sysiconBtnNoIcon">
                                    <{t}>
                                      下载
                                      <{/t}>
                                  </a>
                                  <{/if}>
                                    <span class="sysiconBtnNoIcon temp-btns btn-delete" onClick="void function(themeitem){
                                    if(window.confirm('删除后将无法恢复，确认删除吗？')){
                                    W.page('index.php?ctl=system/template&act=remove&p[0]=<{$theme.theme}>',{update:'messagebox',onComplete:function(){themeitem.remove()}});
                                    }}($(this).getParent('.item'))">
                                      <{t}><{/t}>
                                    </span>
                            </div>
                            <!-- <ul class="info widgets">
                            <li style="color:#666" ><{$theme.info}></li>
                            <li><{t}>占用空间：<{/t}><{$theme.size|size}></li>
                            <li><{t}>使用到的版块：<{/t}></li>
                            <{if count($theme.widgets)>0}>
                            <{$theme.widget}>
                            <{foreach from=$theme.widgets item=widget}>
                            <{if $widget.installed}>
                            <{$widget.name}> | <{else}><span style="color:red"><{t}>缺失:<{/t}><{$widget.name}></span> |
                            <{/if}>
                            <{/foreach}>
                            <{/if}>
                            </ul> -->
                          </div>
                          <!-- <h5 style="margin:0; height:20px; padding:0">
                            <{$theme.name|cut:16}>
                              (
                              <{$theme.version|cut:20}>
                                )
                          </h5>
                          <span style="color:#999; font-size:11px; font-weight:normal;">
                            <a href="<{$theme.site}>" target="_blank">
                              <{$theme.author|cut:20}>
                            </a>
                            |
                            <{$theme.stime|cdate}>
                          </span> -->
                        </td>
                      </tr>
                    </table>
                  </div>
                  <{/if}>
                    <{/foreach}>
            </div>
        </div>
      </div>
    </div>

    